import { useState, useEffect } from "react";
import "./index.less";

function MeauBox({isShowBox, data}: any) {
  const { item, index } = data;
  const { source } = item;

  const cssBySource = source === 'message' ? 'isMessage' : 'isReply';

  return (
    <>
      {
        isShowBox ?
          <div className={ `meau-box ${ cssBySource }`} id="mead">
            <div className="meau-box-triangle"></div>
            <div className="meau-box-item">
              <img className="meau-box-icon" src="/assets/icon/xiaoxi_chehui@2x.png" alt="" />
              <div className="meau-box-text">撤回</div>
            </div>
            <div className="meau-box-item">
              <img className="meau-box-icon" src="/assets/icon/xiaoxi_huifu@2x.png" alt="" />
              <div className="meau-box-text">回复</div>
            </div>
          </div> :
          null
      }
    </>
  );
}

export default MeauBox;
